import styles from '../styles.less';
import { Card, Divider, Upload, message } from 'antd';
import { connect } from 'umi';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { useCallback, useEffect, useState } from 'react';
import { host } from '@/requestErrorConfig';
import { sex_const } from '@/utils/const';

const beforeUpload = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('图片必须小于10MB!');
  }
  return isLt10M;
};

const LeftContent = props => {
  const [uploading, setUploading] = useState(false);
  const { loading, userInfo, dispatch } = props;

  const fetchInfo = useCallback(() => {
    dispatch({ type: 'PUcenter/fetchInfo' });
  }, [dispatch]);

  useEffect(() => {
    fetchInfo();
  }, []);

  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setUploading(true);
      return;
    }
    if (info.file.status === 'done') {
      setUploading(false);
      if (info.file.response) {
        let response = { ...info.file.response };
        if (response.code === 0) {
          dispatch({
            type: 'PUcenter/avatar',
            payload: response.data.url,
            callback: () => {
              fetchInfo();
            },
          });
        }
      }
    }
  };

  const uploadButton = (
    <div>
      {uploading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        上传头像
      </div>
    </div>
  );

  return (
    <Card bordered={false} loading={loading} className={styles.leftContent}>
      <div>
        <div className={styles.avatarHolder}>
          <Upload
            accept={'image/*'}
            listType="picture-circle"
            className="avatar-uploader"
            showUploadList={false}
            name="file"
            action={`${host}/minio/upload`}
            headers={{ tenantToken: window.localStorage.getItem('token') }}
            beforeUpload={beforeUpload}
            onChange={info => handleChange(info)}
          >
            {(userInfo && userInfo.avatar) ? (
              <img
                src={userInfo.avatar}
                alt="avatar"
                style={{
                  width: '100%',
                  borderRadius: '50%',
                }}
              />
            ) : (
              uploadButton
            )}
          </Upload>
          <div className={styles.name}>{userInfo && userInfo.nickname ? userInfo.nickname : '未设置'}</div>
        </div>
        <Divider style={{ marginTop: 16, marginBottom: 12 }} dashed />
        <div className={styles.detail}>
          <div className={styles.line}>
            <div className={styles.label}>登录账号</div>
            <div>{userInfo && userInfo.username ? userInfo.username : '未设置'}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
          <div className={styles.line}>
            <div className={styles.label}>联系电话</div>
            <div>{userInfo && userInfo.mobile ? userInfo.mobile : '未设置'}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
          <div className={styles.line}>
            <div className={styles.label}>工号</div>
            <div>{userInfo && userInfo.work ? userInfo.work : '未设置'}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
          <div className={styles.line}>
            <div className={styles.label}>电子邮箱</div>
            <div>{userInfo && userInfo.email ? userInfo.email : '未设置'}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
          <div className={styles.line}>
            <div className={styles.label}>性别</div>
            <div>{userInfo && sex_const.get(userInfo.sex)}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
          <div className={styles.line}>
            <div className={styles.label}>归属部门</div>
            <div>{userInfo && userInfo.deptNames ? userInfo.deptNames : '未设置'}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
          <div className={styles.line}>
            <div className={styles.label}>职位</div>
            <div>{userInfo && userInfo.postNames ? userInfo.postNames : '未设置'}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
          <div className={styles.line}>
            <div className={styles.label}>所属角色</div>
            <div>{userInfo && userInfo.roleNames ? userInfo.roleNames : '未设置'}</div>
          </div>
          <Divider style={{ margin: '12px 0' }} dashed />
        </div>
      </div>
    </Card>
  );
};

export default connect(({ PUcenter, loading }) => {
  return {
    userInfo: PUcenter.userInfo,
    loading: loading.effects['PUcenter/fetchInfo'],
  };
})(LeftContent);
